<template>
    <view class="app">
        <load :ready="ready"></load>
		<view class="with-head">
			<view class="name">可提现金额(元)</view>
			<view class="num">{{info.accountPrice}}</view>
		</view>
		<view class="form">
			<view class="tit">提现金额</view>
			<view class="get-mon">
				<text>￥</text>
				<input type="number" v-model="price" class="form-int">
				<view class="all" @click="setAll">全部提现</view>
			</view>
			<view class="tit" style="display: flex; justify-content: space-between;">
				<view>
					提现至
				</view>
				<view>
					<view class="item" v-if="list.length" @click="link('./bank_list')">
						<image v-if="typeMap[bankInfo.bankType]" :src="typeMap[bankInfo.bankType].icon" class="icon" mode="widthFix"></image>
						
						<view class="bank">{{bankInfo.typeName}}</view>
						<u-icon name="arrow-right" color="#8A8A8A"></u-icon>
					</view>
				</view>
			</view>
			
			<view v-if="!list.length" class="btn-add" @click="link('./bank_form')">
				<u-icon name="plus-circle-fill" color="#A4A9B0" size="36"></u-icon>
				<text>添加银行卡</text>
			</view>
			
		</view>
		
		<u-gap height="160"></u-gap>
		<view class="btnbox fixed">
			<u-button type="primary" shape="circle" @click="submit" :loading="isLoading" :custom-style="$config.btnStyle">申请提现</u-button>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
            ready: false,
			form:{
				type:'全部',
				state:'全部',
			},
			showCalendar:false,
			current: 0,
			showState:false,
			info:{},
			price:'',
			list:[],
			bankInfo:{},
			typeMap:{},
        };
    },
    onLoad() {
        that = this;
		uni.$on('selectBank', this.onSelectBank);
		this.getInit();
		this.getList();
    },
    onReady() {
    },
	onShow(){
		if(this.can && !this.list.length){
			this.getList()
		}
		this.can = true
	},
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		onSelectBank(item){
			this.bankInfo = item;
		},
		setAll(){
			this.price = this.info.accountPrice
		},
		async getInit(){
			const [resType,res] = await Promise.all([
				this.$api.bankType(),
				this.$api.agencyHome()
			])
			if (resType.data.code == this.$config.RESOK) {
				let typeMap = {}
				resType.data.data.forEach(item=>{
					typeMap[item.id] = item
				})
				this.typeMap = typeMap
			} else {
				this.$message.error(res.data.msg);
			}
			
			if (res.data.code == this.$config.RESOK) {
				let info = res.data.data;
				this.info = info
				this.ready=true
			} else {
				this.$message.error(res.data.msg);
			}
		},
		async getList(){
			let res = await this.$api.bankMessage();
			if (res.data.code == this.$config.RESOK) {
				this.list = res.data.data;
				this.bankInfo = this.list[0];
			} else {
				this.$message.error(res.data.msg);
			}
		},
		
		handleTab(e){
			this.current = e;
		},
        async submit() {
			if(!this.price.length){
				this.$common.showTip('请输入提现金额')
				return
			}
			if(!this.bankInfo.id){
				this.$common.showTip('请选择提现银行卡')
				return
			}
			
			this.isLoading = true
			let params = {
				price: this.price,
				bankId:this.bankInfo.id
			}
			let res = await this.$api.applyWithdraw(params);
			this.isLoading = false;
			if (res.data.code == this.$config.RESOK) {
				// this.$common.showTip(res.data.msg);
				this.$common.showTip('申请提现成功，请耐心等待平台审核');
				this.getInit();
				this.price  = '';
				setTimeout(()=>{
					uni.redirectTo({
						url:'/pages/user/finance?current=1'
					})
				},2000)
			} else {
				this.$message.error(res.data.msg);
			}
        },
        ...mapActions([])
    },
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: #f5f5f5;
}
.with-head{
	background: $color;
	color: #fff;
	padding: 24rpx 50rpx ;
	.name{
		font-size: 16px;
		margin-bottom: 4px;
	}
	.num{
		font-weight: bold;
		font-size: 22px;
	}
}
.form{
	background: #fff;
	margin: 30rpx;
	border-radius: 20px;
	padding: 40rpx;
	.tit{
		font-size: 16px;
		margin-bottom: 32rpx;
	}
	.get-mon{
		display: flex;
		border-bottom: 1px solid #ddd;
		align-items: center;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		text{
			font-size: 32px;
			color: #17181A;
		}
		.form-int{
			flex: 1;
			height: 40px;
			font-size: 32px;
		}
		.all{
			color: $color;
			font-size: 14px;
		}
	}
	.item{
		@include flexbox;
		.icon{
			width: 20px;
			height: 20px
		}
		.bank{
			flex: 1;
			padding: 0 12px 0 8px;
		}
	}
}
.btn-add{
	border: 2px dashed #D8D8D8;
	border-radius: 10px;
	text-align: center;
	margin: 0 30rpx 30rpx;
	padding: 12px 0;
	text{
		margin-left: 5px;
		font-size: 16px;
		color: #A4A9B0;
	}
}
</style>


